<template>
  <div class="pd-20">
    <el-input v-model="param.name"
              placeholder="请输入筛查名称"
              class="w-200"
              @clear="handleQuery"
              clearable></el-input>
    <!-- <el-select v-model="param.healthRiskTypeName" clearable>
          <el-option
            v-for="item in healthRiskType"
            :key="item.id"
            :label="item.name"
            :value="item.name">
          </el-option>
      </el-select> -->
    <el-select v-model="param.status"
               @clear="handleQuery"
               @change="handleQuery"
               clearable>
      <el-option label="上架"
                 :value="1"></el-option>
      <el-option label="下架"
                 :value="0"></el-option>
    </el-select>
    <el-button @click="handle(1,0)"
               type="primary">查 询</el-button>
    <el-button @click="handle(2,0)"
               type="primary">新 增</el-button>
    <el-table :data="tableData"
              border
              class="mt-20">
      <!-- <el-table-column align="center" prop="name"  label="序号"></el-table-column> -->
      <el-table-column align="center"
                       prop="name"
                       label="筛查名称"></el-table-column>
      <el-table-column align="center"
                       prop="deviceName"
                       label="关联商品"></el-table-column>
      <el-table-column align="center"
                       prop="price"
                       label="价格">
        <template slot-scope="scope">
          {{scope.row.price+'  元起'}}
        </template>
      </el-table-column>
      <el-table-column align="center"
                       prop="createTime"
                       label="上线时间">
        <template slot-scope="scope">
          {{commonFunction.timestampFormat(new Date(scope.row.createTime), 'yyyy-MM-dd hh:mm:ss')}}
        </template>

      </el-table-column>
      <el-table-column align="center"
                       prop="sortNum"
                       label="状态">
        <template slot-scope="scope">
          <span style="color:#f00">{{scope.row.status === 1 ?'上架':'下架'}}</span>
        </template>
      </el-table-column>

      <el-table-column align="center"
                       label="操作"
                       width="240">
        <template slot-scope="scope">
          <el-button type="primary"
                     @click="handle(3,scope.row)">编 辑</el-button>
          <el-button type="info"
                     @click="handle(4,scope.row)">{{scope.row.status === 0 ?'上 架':'下 架'}}</el-button>
          <el-button type="danger"
                     @click="handle(5,scope.row)">删 除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <page @getList="_getList"
          :pageTotal="pageTotal"
          ref="page"></page>
    <adddialog v-if="showdialog"
               :dialogData='dialogData'
               :visible.sync="showdialog" />
  </div>
</template>

<script>
  import Page from '@/base/page/page'
  import adddialog from './dialog'
  import { mapGetters } from 'vuex'
  export default {
    data () {
      return {
        tableData: [],
        pageTotal: 0,
        showdialog: false,
        dialogData: {
          show: false,
          info: {},
          title: '新增'
        },
        healthRiskType: [],
        param: {
          type: 2,
          name: '',
          status: '',
          healthRiskTypeName: ''
        }
      }
    },
    mounted () {
      this._getList();
      this.post(this.api.cooperationHospital.healthRiskTypegetPageList, {
        pageSize: 100,
        pageIndex: 0,
      }).then(res => {
        if (res.data.code === '200') {
          this.healthRiskType = res.data.object;
        }
      })

    },
    methods: {
      handleQuery() {
        this.page.pageIndex=0
        this._getList()
      },
      _getList () {
        this.param.pageSize = this.page.pageSize;
        this.param.pageIndex = this.page.pageIndex;
        this.post(this.api.cooperationHospital.healthCheckManagegetPageList, this.param).then(res => {
          if (res.data.code === '200') {
            this.tableData = res.data.object;
            this.pageTotal = res.data.totalNum;
          }
        })
      },
      handle (index, row) {
        switch (index) {
          case 1:
            this._getList();
            break
          case 2:
            this.showdialog = true
            this.dialogData = {
              show: true,
              info: null,
              title: '新增'
            }
            break
          case 3:
            this.showdialog = true
            this.dialogData = {
              show: true,
              info: row,
              title: '编辑'
            }
            break
          case 4:
            let state
            row.status === 1 ? state = 0 : state = 1;
            this.$confirm(`您是否要${state === 1 ? '上架' : '下架'}该套餐？`, '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {

              this.post(this.api.cooperationHospital.healthCheckManageupdateStatus, { status: state, id: row.id }).then(res => {
                if (res.data.code === '200') {
                  this.$message.success(`${state === 1 ? '上架' : '下架'}成功!`);
                  this._getList();
                }
              })
            }).catch(() => {
              this.$message({
                type: 'info',
                message: '已取消'
              })
            });
            break
          case 5:
            this.$confirm('此操作将永久删除, 是否继续?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              this.post(this.api.cooperationHospital.healthCheckManagedel, { id: row.id }).then(res => {
                if (res.data.code === '200') {
                  this.$message.success(res.data.message);
                  this._getList();
                }
              })
            }).catch(() => {
              this.$message({
                type: 'info',
                message: '已取消删除'
              })
            });
            break
        }
      }
    },
    computed: {
      ...mapGetters([
        'page'
      ])
    },
    components: {
      Page,
      adddialog
    }
  }
</script>

<style>
</style>
